<!-- @LESSON -->
<!DOCTYPE html>
<html>
    <head>
        <title>Lesson 9a</title>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
	
    <body>
        <!-- TODO Remove the fixed navbar -->
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">ACME News</a>
                </div>

                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                        <li><a href="#">Page 4</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 5 <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Page 5a</a></li>
                                <li><a href="#">Page 5b</a></li>
                                <li><a href="#">Page 5c</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Sign In</a></li>
                    </ul>
                </div>
            </div>
        </nav>
	
        <!-- TODO add the form -->
        <div class="container">

            <h1>Sign Up</h1>

            <form action="#" method="POST" id="signupForm">
                <div class="row">
                    <div class="col-md-4 col-lg-4">
                        <div class="form-group" id="inputNameFormGroup">				
                            <label class="control-label" for="inputName">Name</label>				
                            <input type="text" class="form-control" id="inputName" placeholder="Enter your name">    			
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3 col-lg-3">
                        <div class="form-group" id="inputEmailFormGroup">
                            <label class="control-label" for="inputEmail">Email Address</label>
                            <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email address">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-lg-2">
                        <div class="form-group" id="inputPasswordFormGroup">
                            <label class="control-label" for="inputPassword">Password</label>
                            <input type="password" class="form-control" id="inputPassword">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-lg-2">
                        <div class="form-group" id="inputRepeatPasswordFormGroup">
                            <label class="control-label" for="inputRepeatPassword"> Repeat Password</label>
                            <input type="password" class="form-control" id="inputRepeatPassword">
                        </div>
                    </div>
                </div>
                <!-- TODO placeholder for alerts -->
                <div class="row">
                    <div class="col-md-4 col-lg-4" id="placeForAlert"></div>
                </div>

                <p><button type="submit" class="btn btn-primary" id="submitButton">Submit</button></p>
            </form>
        </div>
		
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </body>
</html>